<template>
  <div class="ImageResultWrap">
    <div class="contentWrap">
      <div class="list">
        <div class="item" v-for="(item, index) in (TotalResult + 1)" v-loading="nowLoading <= index" @click="nowImg=index">
            <el-image class="img" :src="ResultUrl[index]" fit="contain"></el-image>
        </div>
      </div>
      <div class="wrap" v-loading="ResultUrl.length == 0">
        <el-image  class="img" :src="ResultUrl[nowImg]" fit="contain" :preview-src-list="ResultUrl" :initial-index="nowImg" :preview-teleported="true"></el-image>
      </div>
    </div>
    <div class="toolBar">
      <a href="#" class="btn" @click="toChangeType(6)" v-if="ToolType!==6">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_reimagine.png')"></el-image>
        <span class="txt">智能二创</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(4)" v-if="ToolType!==4">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_remove_background.png')"></el-image>
        <span class="txt">背景消除</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(5)" v-if="ToolType!==5">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_upscaling.png')"></el-image>
        <span class="txt">高清还原</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(3)" v-if="ToolType!==3">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_face_swap.png')"></el-image>
        <span class="txt">素材换脸</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(10)" v-if="ToolType!==10">
        <el-image class="img" :fit="'contain'" :src="require('@/assets/images/icon_change_background.png')"></el-image>
        <span class="txt">更换背景</span>
      </a>
      <a href="#" class="btn" @click="toChangeType(1001)" v-if="ToolType!==1001">
        <el-image class="img logo" :fit="'contain'" :src="require('@/assets/images/p.png')"></el-image>
        <span class="txt">模特换装</span>
      </a>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<script>
import PromptSelecter from '../element/PromptSelecter.vue'
import WebRequest from '../../unit/request.js'
export default {
  name: 'MulitImageResult',
  components: { PromptSelecter },
  props: {
    /* { "tabId": 1, "title": "常用", "basePrompt": "", "baseParm": "", "sessionGroup": [ 1 ] }*/
    Status:{ 
      type: Number,
      default: 0//0:waitting,100:loading,200:success,300:error
    },
    TotalResult:{
      type: Number,
      default: 4
    },
    //0, 首页：算力点数; 1 文生图; 2 智能拼图; 3 素材换脸; 4 抠图; 5 高清还原; 6 图片智能二创; 7 涂抹消除; 8 文本消除; 9 扩图重构; 10 换背景; 11 手绘生图12 文生图（MidjourneyBot） 1001模特换装,示例值(1)
    ToolType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      taskId:'',
      nowLoading:0,
      nowImg:0,
      isLoading:false,
      ResultUrl:[],
    }
  },
  methods: {
    StartGetResult(taskId){
      this.taskId = taskId
      this.nowLoading = 0
      this.ResultUrl = []
      var interval = setInterval(() => {
        if(this.nowLoading == 0){
          this.GetTask((data) => {
            this.nowLoading +=1
            this.ResultUrl.push(data.imageUrl)
            if(this.nowLoading > this.TotalResult){
              clearInterval(interval);
            }
          })
        }else{
          this.SelectOneTask((data) => {
            this.nowLoading +=1
            this.ResultUrl.push(data.imageUrl)
            if(this.nowLoading > this.TotalResult){
              clearInterval(interval);
            }
          })
        }
      },2000)
    },
    GetTask(successCallBack){
      if(!this.isLoading){
      this.isLoading = true;
      WebRequest.GetMJTaskResult({
        taskId:this.taskId,
        callback: (res) => {
          this.isLoading = false;
          if(res.data.errCode == 10000 && res.data.data.status == 2){
            successCallBack(res.data.data)
          }
        },
        error: (res) => {
          console.log('web request error',res)
          this.isLoading = false;
        }
      })
      }
    },
    SelectOneTask(successCallBack){
      if(!this.isLoading){
      this.isLoading = true;
      WebRequest.GetMJSingleResult({
        taskId:this.taskId,
        index:this.nowLoading,
        callback: (res) => {
          this.isLoading = false;
          if(res.data.errCode == 10000 && res.data.data.status == 2){
            successCallBack(res.data.data)
          }
        },
        error: (res) => {
          console.log('web request error',res)
          this.isLoading = false;
        }
      })
      }
    },
    // 跳到下一步编辑模块
    toChangeType(type) {
      if (!this.ResultUrl || this.ResultUrl.length==0) {
        return false
      }
      this.$emit('ChangeType', {type, imageUrl: this.ResultUrl[this.nowImg]})
      return false
    },
  }
}
</script>
